<template>
    <div class="user-dashboard">
      <!-- 用户信息头部 -->
      <el-row :gutter="20" class="user-header">
        <el-col :span="24">
          <el-card shadow="never" class="user-info-card">
            <div class="flex items-center">
              <el-avatar :size="60" src="https://example.com/avatar.png" />
              <div class="user-meta ml-4">
                <h3 class="!m-0">微信昵称：{{ user.wechatName }}</h3>
                <div class="stats mt-2">
                  <el-tag type="info">剩余积分：{{ user.points }}</el-tag>
                  <el-tag type="warning" class="ml-2">可用余额：￥{{ user.balance }}</el-tag>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 账户操作区 -->
      <el-row :gutter="20" class="mt-4">
        <el-col :span="8">
          <el-card shadow="hover" class="action-card">
            <h4>储值账户</h4>
            <div class="value text-red-500">￥{{ user.balance }}</div>
            <el-button type="primary" size="small" @click="handleRecharge">充值</el-button>
            <el-button class="ml-2" size="small" @click="handleAdjustBalance">修改余额</el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="action-card">
            <h4>积分</h4>
            <div class="value text-orange-500">{{ user.points }}</div>
            <el-button type="success" size="small" @click="handleSendPoints">送积分</el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="action-card">
            <h4>优惠券</h4>
            <div class="value text-green-500">{{ user.coupons }}张</div>
            <el-button type="warning" size="small" @click="handleSendCoupon">送优惠券</el-button>
            <el-button class="ml-2" size="small" @click="handleAddTag">添加标签</el-button>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 消费统计 -->
      <el-card shadow="never" class="mt-4 stats-card">
        <h3>消费信息</h3>
        <el-row :gutter="20" class="mt-2">
          <el-col :span="6" v-for="(stat, index) in stats" :key="index">
            <div class="stat-item">
              <div class="label">{{ stat.label }}</div>
              <div class="value">{{ stat.value }}</div>
            </div>
          </el-col>
        </el-row>
      </el-card>
  
      <!-- 消费记录表格 -->
      <el-card shadow="never" class="mt-4">
        <div class="flex justify-between mb-4">
          <h3>消费记录</h3>
          <el-button type="primary" icon="Upload" @click="handleImport">线下导入会员</el-button>
        </div>
        
        <el-table :data="records" stripe style="width: 100%">
          <el-table-column prop="name" label="交易名称" />
          <el-table-column prop="time" label="消费时间" width="180" />
          <el-table-column prop="store" label="消费门店" />
          <el-table-column prop="points" label="积分" width="100" />
        </el-table>
  
        <div class="pagination mt-4">
          累计{{ records.length }}条数据
          <el-pagination 
            :current-page="1"
            :page-size="10"
            layout="prev, pager, next"
            :total="1"
            hide-on-single-page
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { reactive, ref } from 'vue'
  
  // 模拟数据
  const user = reactive({
    wechatName: 'zhangsan',
    balance: 11222,
    points: 1111,
    coupons: 0
  })
  
  const stats = reactive([
    { label: '累计消费金额', value: '￥0' },
    { label: '累计充值次数', value: '0次' },
    { label: '累计积分', value: '1111' },
    { label: '平均消费金额', value: '￥0' },
    { label: '上次消费时间', value: '---' },
    { label: '累计充值金额', value: '￥0' }
  ])
  
  const records = ref([
    {
      name: '线下导入会员',
      time: '2025-03-11 11:27:46',
      store: '智慧酒店（智慧酒店分店）',
      points: 1111
    }
  ])
  
  // 操作方法
  const handleRecharge = () => console.log('充值')
  const handleSendPoints = () => console.log('送积分')
  const handleSendCoupon = () => console.log('送优惠券')
  const handleAdjustBalance = () => console.log('修改余额')
  const handleAddTag = () => console.log('添加标签')
  const handleImport = () => console.log('导入会员')
  </script>
  
  <style lang="scss" scoped>
  .user-dashboard {
    padding: 20px;
    background: #f8f9fa;
  
    .user-info-card {
      :deep(.el-card__body) {
        padding: 20px;
      }
      
      .user-meta h3 {
        font-size: 18px;
        color: #333;
      }
    }
  
    .action-card {
      text-align: center;
      
      h4 {
        color: #666;
        margin: 0 0 10px 0;
      }
      
      .value {
        font-size: 24px;
        margin: 10px 0;
      }
    }
  
    .stats-card {
      h3 {
        color: #333;
        margin-bottom: 15px;
      }
      
      .stat-item {
        padding: 12px;
        border-radius: 4px;
        background: #f8f9fa;
        
        .label {
          color: #909399;
          font-size: 14px;
        }
        
        .value {
          font-size: 16px;
          margin-top: 8px;
          color: #333;
        }
      }
    }
  
    .pagination {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #666;
    }
  }
  </style>